<template>
  <div class="visitor-water">
    <span class="total-tip">
      可预约总量
      <i>{{ total }}</i>
      人
    </span>
    <div class="cur-amount">
      <span class="amout-item" v-for="(item, index) in curAmount" :key="index">
        {{ item }}
      </span>
    </div>
    <div class="wu-chart" ref="wuChartRef"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import 'echarts-liquidfill'
const total = ref(999999)
const curAmount = ref('216908人')
const orderAmount = ref(0.5)
const waterData = computed(() => {
  return [orderAmount.value, orderAmount.value, orderAmount.value]
})
// 满环是120
const ringData = computed(() => {
  const percent = orderAmount.value * 120
  return [percent]
})
const wuChartRef = ref()
onMounted(() => {
  const wuChart = echarts.init(wuChartRef.value)
  let option = {
    title: {
      // text: '实时游客统计',
      show: false
    },
    tooltip: {},
    // legend: {
    //   data: ['销量']
    // },
    // xAxis: {
    //   // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    // },
    // yAxis: {},
    polar: {
      radius: ['75%', '85%'],
      center: ['50%', '50%']
    },
    // grid: {
    //   top: 50,
    //   bottom: 0,
    //   left: 0,
    //   right: 0
    // },
    angleAxis: {
      max: 120,
      clockwise: false,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      },
      startAngle: 188
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: '预约量',
        type: 'liquidFill',
        radius: '70%',
        z: 2,
        center: ['50%', '50%'],
        data: waterData.value,
        label: {
          position: ['50%', '35%'],
          formatter: function (res: any) {
            const { seriesName, value } = res
            return `${seriesName}\n${value * 100}%`
          },
          fontSize: 14,
          color: '#fff',
          lineHeight: 24,
          align: 'center',
          baseline: 'middle'
          // position: 'inside'
        },
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#35FAB6' },
              { offset: 1, color: 'rgba(40, 209, 247,0.3)' }
            ],
            global: false
          }
        },
        outline: {
          borderDistance: 0,
          itemStyle: {
            borderWidth: 2,
            borderColor: '#31d8d5',
            shadowBlur: 20,
            shadowColor: '#50c1a7'
          }
        },
        backgroundStyle: {
          borderWidth: 1,
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              { offset: 0, color: '#0D2648' },
              { offset: 0.8, color: '#0D2648' },
              { offset: 1, color: '#228E7D' }
            ],
            global: false
          }
        }
      },
      {
        type: 'pie',
        radius: ['80%', '80%'],
        center: ['50%', '50%'],
        z: 1,
        label: { show: false },
        silent: true,
        itemStyle: {
          borderWidth: 2,
          borderType: [8, 10],
          borderDashOffset: 15,
          borderColor: '#31d8d5',
          color: '#11144e',
          borderCap: 'round'
        },
        data: [100]
      },
      {
        type: 'bar',
        data: ringData.value,
        z: 10,
        coordinateSystem: 'polar',
        roundCap: true,
        color: '#31d8d5'
      }
    ]
  }
  wuChart.setOption(option)
})
</script>

<style lang="scss" scoped>
.wu-chart {
  width: 100%;
  height: calc(100% - 70px);
  margin-top: 10px;
}

.cur-amount {
  margin: 10px;
  text-align: center;
}

.amout-item {
  display: inline-block;
  width: 52px;
  height: 50px;
  line-height: 50px;
  margin-right: 1px;
  // font-family: MetroDF;
  font-size: 28px;
  color: #6ff;
  background: url('@/assets/imgs/screen/total.png') no-repeat;
  background-size: 100% 100%;
}

.visitor-water {
  position: relative;
  height: 100%;

  .total-tip {
    position: absolute;
    top: -30px;
    right: 0;
    font-size: 14px;

    i {
      font-size: 14px;
      color: #ce6a10;
    }
  }
}
</style>
